<template>
	<view>
		<!-- <view class="" id="kline" style="width:300px;height:400px"></view> -->
		<view class="" id="kline" style="height:500px"></view>
		<view v-for="v in mainIndicators">
			<up-button type="primary" @click="setMainIndicator(v)">{{v}}</up-button>
		</view>
		<view v-for="v in subIndicators">
			<up-button type="primary" @click="setSubIndicator(v)">{{v}}</up-button>
		</view>
		<view v-for="v in interval">
			<up-button type="primary" @click="changeKline(v)">{{v}}</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		ref
	} from 'vue'
	import {
		init,
		dispose
	} from 'klinecharts'
	import websocket from '@/ws_serve/wsocket.js';
	import config from '@/api/config.js'
	import {
		onShow,
		onHide
	} from '@dcloudio/uni-app'


	var chart = null,
		klineData = {},
		indicatorsStatus = {},
		symbol = 'BTCUSDT',
		c_interval = '1s';

	const interval = ['1s', '1m', '5m', '15m', '30m', '1h', '4h', '12h', '1d', '1w']

	const mainIndicators = ['MA',
		'BOLL',
	]
	const subIndicators = ['EMA', 'SMA', 'BBI', 'VOL', 'MACD', 'KDJ', 'RSI', 'VR', 'MTM', 'EMV', 'SAR', 'AO', 'ROC', 'PVT',
		'AVP'
	]
	onMounted(() => {
		chart = init('kline')
		for (let s of interval) {
			let k = `kline_${symbol.toLowerCase()}_${s}`
			klineData[k] = [];
		}
	})

	onUnmounted(() => {
		dispose('chart')
		klineData = {}
	})
	onShow(() => {
		socket.reconnect()
	})
	onHide(() => {
		socket.close()
	})

	const upKlineData = (k, data) => {
		klineData[k].push(data)
		if (klineData[k].length > 1000) {
			klineData[k] = klineData[k].slice(-1000);
		}
	}

	const changeKline = (inter) => {
		c_interval = inter
		let k = `kline_${symbol.toLowerCase()}_${inter}`
		console.log('change' + k)
		chart.clearData()
		chart.applyNewData(klineData[k]);
	}

	function setMainIndicator(name) {
		if (indicatorsStatus[name]) {
			chart.removeIndicator('candle_pane', name)
			indicatorsStatus[name] = ''
		} else {
			indicatorsStatus[name] = chart.createIndicator(name, true, {
				id: 'candle_pane'
			})
		}
	}

	function setSubIndicator(name) {
		if (indicatorsStatus[name]) {
			chart.removeIndicator('i' + name, name)
			indicatorsStatus[name] = ''
		} else {
			indicatorsStatus[name] = chart.createIndicator(name, true, {
				id: 'i' + name
			})
		}
	}
	const socket = new websocket(config.ws, (data) => {
		if (data.event == 'trade_kline') {
			if (data.data.k.i == c_interval) {
				let k = `kline_${symbol.toLowerCase()}_${c_interval}`;
				console.log(data.data.k.i, c_interval, k)
				let res = {
					timestamp: data.data.E,
					open: parseFloat(data.data.k.o),
					close: parseFloat(data.data.k.c),
					high: parseFloat(data.data.k.h),
					low: parseFloat(data.data.k.l),
					volume: parseFloat(data.data.k.v),
					// 成交额，非必须字段，如果需要展示技术指标'EMV'和'AVP'，则需要为该字段填充数据。
					turnover: parseFloat(data.data.k.q),
				}
				upKlineData(k, res)
				chart.updateData(res);
			}
		}
		if (data.event.includes('_init')) {
			let k = data.event.replace('_init', '')
			for (let s of data.data) {
				upKlineData(k, {
					timestamp: s.E,
					open: parseFloat(s.k.o),
					close: parseFloat(s.k.c),
					high: parseFloat(s.k.h),
					low: parseFloat(s.k.l),
					volume: parseFloat(s.k.v),
					turnover: parseFloat(s.k.q),
				})
			}
			if (k == `kline_${symbol.toLowerCase()}_${c_interval}`) {
				chart.applyNewData(klineData[k]);
			}
		}
	})

	socket.events.onOpen = (res) => {
		socket.send({
			"event": "subscribe",
			"app_source": "h5",
			"type": "trade",
			"symbol": symbol
		})
	}
	socket.connect()
</script>

<style>

</style>